<!-- 界面 -->
<template>
    <div>
        <el-upload style="display:inline-block;margin-top:20px;float:left;"
            ref="upload"
            :data="uploadData"
            action=""
            :limit="1"
            :on-preview="handlePreview"
            :on-remove="handleRemove" 
            :file-list="imglist"
            accept=".png,.jpg"
            :http-request="uploadFile" 
            >
                <!-- <el-button type="success">上传</el-button> -->
            <el-button style="margin:20px 0 0 5px;float:left;" type="primary" @click="onSubmit()">上传</el-button>
            <span style="color: #F56C6C;">{{ uploadError }}</span>
        </el-upload>
    </div>
</template>

<!-- JavaScript逻辑处理   功能逻辑 -->
<script>
import {userInfo} from '../ajax/get'
import {userRegistration,uploadImageToServerRandName} from '../ajax/post'


export default {
    name: "UploadPictures",
    data() {
	return {
        // UploadGoodsForm:{},
		uploadError:"",// 当文件选择有问题时显示的属性
        uploadData:{},// 需要导入的文件
        accept:".png,.jpg",// 可进行导入的格式
        imglist:[],

	}
},
    methods:{
        uploadFile(fileImg) {
        const File = fileImg.file;
        let formDataInfo = new FormData();
        formDataInfo.append("file", File);
        console.log("上传图片方法上传成功");
        uploadImageToServerRandName(formDataInfo).then((res) => {
          this.imglist = [];
          console.log(res);
            this.$message({
              message: res.data.msg,
              type: "success",
            });
            this.GoodSForm.goodsImage = res.data.msg;
        })
      },
      //删除文件的时候触发
      handleRemove(file, fileList){
          console.log(file, fileList);
        },
        //点击已上传的图片预览的时候调用
        handlePreview(file) {
          console.log(file);
      },
    //    更新商品数据 
    //   检验是否能够上传并进行上传
      onSubmit(){
        if(this.$refs.upload.uploadFiles.length==0){
          this.uploadError="请选择一个文件进行上传!";
          return false;
        }
        此处可用于多文件上传校验
        for(let i=0; i<this.$refs.upload.uploadFiles.length; i++){
          let name=this.$refs.upload.uploadFiles[i].name;
          // 这里将定义的accept传过来比对格式
          if(".png,.jpg".indexOf(name.substring(name.lastIndexOf(".")).toLowerCase()) < 0){
            this.uploadError="只支持xlsx格式文件!";
            return false;
          }
        }
        进行点击上传
        this.$refs.upload.submit();
      },
    }

}
</script>
<!-- 样式  -->
<style>

</style>